<template>
    <el-card style="width: 100%; height: 100%;">
        <div class="top">
            <el-form inline style="margin: 10px;">
                <el-form-item label="搜索:">
                    <el-input v-model="userInput" id="tipinput" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="search" @click="search()">查询</el-button>
                    <el-button type="primary" icon="refresh" @click="reset()">清空</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div id="map"> </div>
    </el-card>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
// 高德地图API安全配置
window._AMapSecurityConfig = {
    securityJsCode: '1529b57dae46813e2188ddf14dfbb4f3'
}
export default {
    name: "MainContent",
    data() {
        return {
            map: null,
            userInput: '', //绑定的搜索关键字的的内容
            autoOptions: {
                input: 'tipinput' //绑定的搜索关键字的input标签ID，用这个注册
            },
            auto: null,
            placeSearch: null,
            searchPlaceinput: '', //根据搜索组件搜索到以后的地点信息
        }
    },
    mounted() {
        this.initMap()
    },
    methods: {
        initMap() {
            AMapLoader.load({
                key: '85f0a697f26a771adf61a74d8ced8cae', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '1.4.15',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
              // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType',
                    'AMap.Geolocation', 'AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.Autocomplete', 'AMap.Marker'],
              // 需要加载的 AMapUI 插件列表
                AMapUI: {
                    version: '1.1',
                    plugins: []
                }
            }).then((AMap) => {
                this.map = new AMap.Map('map', {
                    resizeEnable: true, //是否监控地图容器尺寸变化
                    viewMode: "3D", //是否为3D地图模式
                    zoom: 13, //初始化地图级别
                    center: [87.617498, 43.825754] //初始化地图中心点
                });

                //引入高德地图的空间绑定使用
                this.map.addControl(new AMap.Scale()) //比例尺
                this.map.addControl(new AMap.ToolBar()) //工具栏
                this.map.addControl(new AMap.MapType()) //地图类型切换
                this.map.addControl(new AMap.Geolocation()) //定位
                this.map.addControl(new AMap.Geocoder()) //地址编码
                this.map.addControl(new AMap.Marker(
                    { position: [87.617498, 43.825754] },
                    { content: '当前位置' },
                    { offset: new AMap.Pixel(10, 30) },
                    { showContent: true },
                    { cursor: 'pointer' },
                    { draggable: true },
                    { raiseOnDrag: true }
                ))
                this.auto = new AMap.AutoComplete(this.autoOptions) //构造自动完成
                this.placeSearch = new AMap.PlaceSearch({  //构造地点查询
                    pageSize: 10,
                    pageIndex: 1,
                    map: this.map
                }) //构造地点查询
                this.loadAdditionalPlugins(AMap)  //加载高德地图的其他插件

            }).catch(e => {
                console.error('高德地图加载失败:', e);
            });
        },
        loadAdditionalPlugins(AMap) {
            AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType',
                'AMap.Geolocation', 'AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.Autocomplete'], () => { // 移除了 'AMap.HawkEye'
                    this.map.addControl(new AMap.Scale())
                    this.map.addControl(new AMap.ToolBar())
                    // 移除了 this.map.addControl(new AMap.HawkEye())
                    this.map.addControl(new AMap.MapType())
                    this.map.addControl(new AMap.Geolocation())
                    this.auto = new AMap.AutoComplete(this.autoOptions)
                    this.placeSearch = new AMap.PlaceSearch({
                        map: this.map
                    })
                    this.auto.on('select', this.select)
                });
        },
        select(e) {
            if (this.placeSearch) {
                this.placeSearch.setCity(e.poi.adcode) //依据城市ID搜索
                this.placeSearch.search(e.poi.name) //关键字查询查询
                this.map.setZoom(10, true)
                this.searchHere = e.poi
                this.$message({
                    message: '选择地点:' + this.searchPlaceinput.name,
                    type: 'success'
                });
            } else {
                console.error('placeSearch 未初始化');
            }
        },
        search() {
            if (this.placeSearch) {
                if (this.userInput) {
                    this.placeSearch.search(this.userInput) //关键字查询查询
                    this.$message.success('搜索成功')
                } else {
                    this.$message.error('请先输入正确的地点')
                }
            } else {
                this.$message.error('placeSearch 未初始化')
            }
        },
        // 重置搜索框
        reset() {
            this.userInput = ''
            this.searchPlaceInput = ''
        },
        
        watch: {
            searchPlaceInput(newval) {
                if (newval !== null) {
                    this.placeSearch.search(newval)
                }
            }
        }
    }
}
</script>

<style scoped>
#map {
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 100%;
    height: 800px;
    overflow: hidden;
    margin: 5px;
}

.el-form-item {
    margin-bottom: 5px;
}
</style>